<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i> 商品管理</el-breadcrumb-item>
                <el-breadcrumb-item v-if="pageType == 'add'"><i class="el-icon-date"></i> 新增分类</el-breadcrumb-item>
                <el-breadcrumb-item v-if="pageType == 'edit'"><i class="el-icon-date"></i> 编辑分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container category-wrap">
            <el-form :model="categoryForm" label-width="90px" label-position="right">
                <el-form-item label="分类权重">
                    <el-input v-model="categoryForm.sort" class="form-input"></el-input>
                </el-form-item>
                <el-form-item label="分类名称" required>
                    <el-input v-model="categoryForm.categoryName" class="form-input"></el-input>
                </el-form-item>
                <el-form-item v-if="categoryForm.parentName" label="所属分类" required>
                    <!--<div class="parent-category-name">-->
                        <!--{{categoryForm.parentName}}-->
                    <!--</div>-->
                    <el-select v-model="categoryForm.parentName" @change="selectVal" style="float: left" placeholder="请选择">
                      <el-option
                        v-for="item in parents"
                        :key="item.name"
                        :label="item.name"
                        :value="item.name">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否显示" required style="text-align: left">
                  <el-switch v-model="categoryForm.categoryType" :active-value="1" :inactive-value="0">
                  </el-switch>
                </el-form-item>
                <el-form-item label="分类图标">
                    <el-upload
                            class="avatar-uploader"
                            :action="request.pdsUrl + '/f/pds/api/common/goods/uploadPhoto'"
                            :show-file-list="false"
                            :on-success="uploadPhotoSuccess"
                            :on-preview="handlePicturePreview"
                            list-type="picture-card"
                            :data="obj"
                            style="float: left;margin-top: 20px">
                        <img v-if="categoryForm.logo" :src="categoryForm.logo" class="avatar" style="width:100%;height:100%;">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">只能上传一个jpg/png文件，且不超过500kb
                        </div>
                    </el-upload>
                    <el-dialog title="分类图标" :visible.sync="picturePreviewVisible" >
                        <div class="picturePreviewDialog"  style="float: left">
                            <img :src="categoryForm.logo" style="width:100%;height:100%;">
                        </div>
                    </el-dialog>
                </el-form-item>
                <el-form-item>
                    <div>
                        <el-button type="primary" size="medium" @click="modifyGoodsCategory">保存</el-button>
                        <el-button type="default" size="medium" @click="backToGoodsCategory">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import Request from './../request.js'
import {getStore, setStore} from "@/util/store";
export default {
    data() {
        return {
            pageType: 'add',
            request: new Request(),
            categoryForm: {
                categoryId: '',
                categoryName: '',
                parentId: 0,
                parentName: '',
                sort: 0,
                logo: '',
                categoryType:1
            },
            obj:{
                shopId: getStore({name: "shopId"}),
                pmId: getStore({name: "pmId"}),
            },
            // 图片上传
            picturePreviewVisible: false,
            parents:[],//分类列表
        }
    },
    mounted() {
        let query = this.$route.query
        console.log("query", query);
        if (query != null) {
            this.initData(query)
        }
        console.log("query 2", query);
        this.path = this.$route.path
        if (this.path == '/goods/addGoodsCate') {
            this.pageType = 'add'
        } else {
            this.pageType = 'edit'
        }
        this.fetchCategoryList()
    },
    methods: {
        fetchCategoryList() {
          this.request.fetchCategoryList({}).then(res => {
            let data = this.$utils.listToTree(res.ext)
            this.parents = data
            //this.goodsCateLoading = false
          })
        },
        initData(data) {
            console.log(data);
            this.categoryForm.parentId = data.parentId || 0
            this.categoryForm.parentName = data.parentName || ''
            this.categoryForm.categoryId = data.categoryId || ''
            this.categoryForm.categoryName = data.categoryName || ''
            this.categoryForm.sort = data.sort || 0
            this.categoryForm.logo = data.logo || ''
            this.categoryForm.categoryType = parseInt(data.categoryType) || 0
        },
        selectVal: function(ele) {
          this.parents.forEach(item=>{
            if(item.name == ele){
              this.categoryForm.parentId = item.id;
            }
          })
        },
        backToGoodsCategory() {
            this.$router.go(-1)
        },
        modifyGoodsCategory() {
            let cate = this.categoryForm
            this.request.modifyGoodsCategory({
                name: cate.categoryName,
                categoryId: cate.categoryId,
                parentId: cate.parentId,
                logo: cate.logo,
                sort: cate.sort,
                categoryType:cate.categoryType
            }).then(res => {
                let tips = (this.pageType == 'add') ? '添加' : '编辑'
                if (res.code == 200) {
                    this.$message.success(tips + '分类成功');
                    this.$router.push({path: '/goods/goodsCate'});
                } else {
                    this.$message.error(tips + '分类失败')
                }
            })
        },
        uploadPhotoSuccess(res) {
            this.categoryForm.logo = res.ext.photoUrl;
        },
        // 图片预览
        handlePicturePreview() {
            this.picturePreviewVisible = true
        },
    }
}
</script>

<style scoped lang="scss">
.crumbs{
    margin-top: 20px;
    margin-left: 10px;
}
.category-wrap {
    padding: 20px;
    .form-input {
      /*width: 286px;*/
      /*transform: translateX(-630px);*/
    }
}

.category-uploader-icon {
    line-height: 150px;
}
.parent-category-name {
    color: #409EFF;
    background: #ecf5ff;
    border-color: #b3d8ff;
    text-align: left;
    padding-left: 15px;

}
.category-logo {
    width: 150px;
    height: 150px;
}
.category-logo-uploader .el-upload--text{
  width: 150px;
  height: 150px;
}
</style>


